<template>
    <div class="NewsDetails">
        <!-- 头部 -->
		<Header :navActive="4" ref="Header"/>
		<!-- 主内容区 -->
		<div class="main cl">
			<div class="banner"></div>
            <div class="w1200">
                <div class="block">
                    <div class="left fl">
                        <div class="title">{{news.title}}</div>
                        <div class="other">
                            <span>发布时间：{{news.publishTime}}</span>
                            <span>浏览量：{{news.browseCount}}</span>
                        </div>
                        <div class="dsc" v-html="news.content"></div>
                        <div  v-if="news.attachment" class="file">相关附件：
                            <a :href="news.attachment_url" download target="_block">{{news.attachment_fileRealName}}</a>
                        </div>
                    </div>
                    <div class="right fr">
                        <div class="bigTitle">热门阅读 <router-link :to="{name:'News'}" class="more">更多<i class="el-icon-arrow-right"></i></router-link></div>
                        <ul class="list">
                            <router-link tag="li" class="item" :to="{name:'NewsDetails',query:{id:item.id}}"  v-for="(item,index) in contentList" :key="index">
                                <div class="img" v-if="item.thumb_dictText"><img :src="item.thumb_dictText"></div>
                                <div class="text">
                                    <div class="title">{{item.title}}</div>
                                    <div class="dsc" v-html="item.seoDesc"></div>
                                    <div class="date">发布时间：{{item.publishTime}}</div>
                                </div>
                            </router-link>
                        </ul>
                    </div>
                </div>
            </div>
		</div>
		<!-- 底部 -->
		<Footer />
    </div>
</template>

<script>
    import {cmsContent_list,cmsContent_queryById} from '@/api/api'
	import Header from '@/components/Header.vue'
	import Footer from '@/components/Footer.vue'
	export default {
		//组件注入
		components: {Header,Footer},
        //存放数据
        data() {
            return {
                news:{},
                contentList:[]
            }
        },
        //接受父组件传递的值
        props:[],
        //监控data中的数据变化
        watch: {
            $route(to, from) {
               this.getContent();
            }
        },
        //方法集合
        methods: {
            getContent(){
                cmsContent_queryById({
                    'id':this.$route.query.id
                }).then(res =>{
                    console.log(res);
                    if(200==res.code){
                        this.news = this.$preImgs("cms_content",res.result);
                        this.channelId = this.news.channelId;
                        this.getHotContentList();
                    }
                });
            },
            //热门阅读
            getHotContentList(){
                cmsContent_list({
                    'channelId':this.news.channelId,
                    'field': 'browse_count',
                    'sort': 'false',
                    'pageNo': 1,
                    'pageSize':3
                }).then(res =>{
                    console.log(res);
                    if(200==res.code){
                        this.contentList =[];
                        var list=[];
                        for(var i in  res.result.records){
                            console.log(i);
                            if(res.result.records[i].id!=this.news.id){
                                list.push(res.result.records[i]);
                            }
                        }
                        this.contentList = list;
                    }
                });
            }//end of function
        },
        //生命周期 - 创建完成（可以访问当前this实例）
        created() {

        },
        //生命周期 - 挂载完成（可以访问DOM元素）
        mounted() {
            this.getContent();
        }
    };
</script>
<style lang="scss">
    @mixin text-ellipsis{white-space:nowrap;overflow:hidden;text-overflow:ellipsis;}
    @mixin text-ellipsisclamp($clamp){display: -webkit-box;-webkit-box-orient: vertical;-webkit-line-clamp: $clamp;overflow: hidden;}
    @mixin transition{transition: all .3s;}
    .NewsDetails{background: #F6F6F6;
		.main{height: auto;padding-bottom: 145px;position: relative;z-index: 0;
            .banner{width: 100%;height: 120px;background: url('../../assets/news-bg.jpg') center no-repeat;background-size: cover;}
            .block{height: auto;overflow: hidden;margin-top: 30px;
                .left{width: 860px;height: auto;overflow: hidden;background: #fff;padding: 40px 60px;
                    .title{font-size: 24px;color: #333;font-weight: bold;}
                    .other{height: auto;overflow: hidden;margin: 20px 0 35px;
                        span{font-size: 14px;color: #999;margin-right: 30px;}
                    }
                    .dsc{font-size: 16px;color: #666;line-height: 30px;margin-top: 20px;
                        p{margin-bottom: 20px;}
                        img{height: auto;}
                    }
                    .file{font-size: 16px; font-weight: 600; margin-top: 30px;
                        a{font-weight: normal; color: #409EFF;}
                    }
                }
                .right{width: 310px;height: auto;overflow: hidden;background: #fff;padding: 30px;
                    .bigTitle{height: 26px;line-height: 26px;font-size: 20px;color: #333;font-weight: bold;position: relative;padding-left: 20px;margin-bottom: 20px;
                        .more{font-size: 14px;color: #777;float: right;font-weight: normal;
                            &:hover{color: #E54437;}
                        }
                        &:before{content: "";width: 6px;height: 20px;background: #E54437;position: absolute;left: 0;top: 4px;}
                    }
                    .list{height: auto;overflow: hidden;
                        .item{width: 250px;padding-bottom: 20px;margin-bottom: 20px;border-bottom: 1px solid #eee;cursor: pointer;
                            .img{width: 250px;height: 149px;overflow: hidden;
                                img{width: 100%;height: 100%;}
                            }
                            .text{height: auto;overflow: hidden;padding-top: 10px;
                                .title{font-size: 16px;color: #333;line-height: 30px;font-weight: bold;@include transition();@include text-ellipsis()}
                                .dsc{font-size: 14px;color: #666;line-height: 24px;@include text-ellipsisclamp(2)}
                                .date{font-size: 14px;color: #999;margin-top: 10px;}
                            }
                            &:last-child{margin: 0;padding: 0;border: 0;}
                            &:hover{
                                img{transform: scale(1.05);}
                                .title{color: #E54437;}
                            }
                        }
                    }
                }
            }
		}
	}
</style>
